<div class="wrapper" *ngIf="sortedApiResponseTags">
	<div *ngIf="sortedApiResponseTags.length != 0">
		<div class="heading">
			Hashtags related to <span class="query">{{query}}</span>
		</div>
		<div class="hashtags">
			<ul class="column">
				<ng-container *ngFor="let tag of sortedApiResponseTags | slice:0:5">
					<li class="hashtag" *ngIf="tag.tag!=null && tag.tag!=''">
						<a [routerLink]="['/search']" [queryParams]="{ query : '#' + tag.tag }">#{{tag.tag}}</a>
					</li>
				</ng-container>
			</ul>
			<ul class="column">
				<ng-container *ngFor="let tag of sortedApiResponseTags | slice:5:10">
					<li class="hashtag" *ngIf="tag.tag!=null && tag.tag!=''">
						<a [routerLink]="['/search']" [queryParams]="{ query : '#' + tag.tag }">#{{tag.tag}}</a>
					</li>
				</ng-container>
			</ul>
		</div>
	</div>
	<div *ngIf="sortedApiResponseTags.length == 0">
		<div class="heading">
			No Hashtags related to <span class="query">{{query}}</span>, please try again!
		</div>
	</div>
</div>
